<template>
	<view 
		class="publicEmpty"
		:style="[
			{ padding: `${top}rpx 0 ${bottom}rpx 0` },
			{ background: bgColor }
		]"
	>
		<image
			v-if="showImg"
			:src="imgUrl || '/static/cart_icon/icon4.png'"
			mode=""
			:style="[
				{ marginBottom: `${distance}rpx` },
				{ width: `${imgWidth}rpx` },
				{ height: `${imgHeight}rpx` },
			]"
		></image>
		<view v-if="desc">{{ desc }}</view>
	</view>
</template>

<script>
	export default {
		name:"emtyp",
		data() {
			return {
				
			};
		},
		props: {
			imgWidth: {
				type: String,
				default: '347',
			},
			imgHeight: {
				type: String,
				default: '346',
			},
			imgUrl: {
				type: String,
				default: '',
			},
			top: {
				type: Number | String,
				default: 0
			},
			bottom: {
				type: Number | String,
				default: 0
			},
			distance: {
				type: Number | String,
				default: 49
			},
			desc: {
				type: String,
				default: ''
			},
			showImg: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: 'white'
			},
		}
	}
</script>

<style scoped lang="scss">
	.publicEmpty{
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 347rpx;
			height: 346rpx;
		}
	}
</style>